<template>
  <div>
        <el-button @click="currentComponent = 'Login'">登录</el-button>
        <el-button @click="currentComponent = 'Reg'">注册</el-button>
        <el-button @click="handleClick">获取</el-button>
        <p ref="p">{{message}}</p>
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>
        
  </div>
</template>

<script>
import Vue from 'vue';
import Login from './Login'
import Reg from './Reg'
export default {
    components:{
        Login,Reg
    },
    data(){
        return {
            currentComponent:"Login",
            message:"hello"
        }
    },
    methods:{
        handleClick(){
            this.message = "message is change";
            
            Vue.nextTick(() => {
                console.log(this.$refs.p.innerHTML);
            });
        }
    }

}
</script>

<style>

</style>